<template>
	<view class="equip-total">
		<!-- 搜索了 -->
		<view class="equip-sear">
			<!-- 下拉框 -->
			<picker @change="bindPickerChange" :value="index" :range="array" class="picker-class">
				<view class="uni-inputs">{{array[index]}}</view>
				<image src="../../static/equipment/ic_next@2x.png" class="img-one"></image>
			</picker>
			<!-- 搜索框 -->
			<view class="search-class">
				<uni-search-bar placeholder="设备名称/设备编号" @confirm="searchs" clearButton="" cancelButton="" cancelText="" bgColor="#F5F7F9"></uni-search-bar>
			</view>
			<!-- 筛选条件 -->
			<view class="more-search-box" @click="do_open()">
				<image src="../../static/equipment/ic_screen@2x.png" class="img-two"></image>
			</view>

			<uni-drawer ref="uniDrawer" mode="right" :mask-click="true" @change="change($event,'showRight')">
				<view class="drawer-class">
					<view class="shebei-class">选择设备类型：</view>
					<radio-group @change="radioChange">
						<view v-for="(item, index) in items" :key="item.id" class="shebei-class">
							<radio :value="item.id" :checked="item.id === current" style="transform:scale(0.7)" />
							<text>{{item.name}}</text>
						</view>
					</radio-group>
				</view>
			</uni-drawer>
		</view>
		<!-- 列表展示 -->
		<!-- <scroll-view class="cont-list" lower-threshold="10" scroll-y="true" @scroll="onScroll" @scrolltolower='jiazai()'> -->
		<view class="scroll-list" v-if="lists.length">
			<view class="list-common" v-for="(listData,index) in lists" :key="index" @click="todetial(listData.id)">
				<view class="common-1">
					<text class="zaixian" v-if="listData.state=='online'">在线</text>
					<text class="lixian" v-if="listData.state=='offline'">离线</text>
					<view class="comm-title">{{listData.name}}</view>
				</view>
				<view class="common-2">
					设备编号：{{listData.code}}
				</view>
				<view class="common-2" style="margin-bottom: 0;">
					设备类型：{{listData.typeName}}
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>

		<view class="no-data" v-else>暂无数据！</view>
		<!-- </scroll-view> -->
		<!-- 底部背景板 -->
		<image src="../../static/index/bg_shadow.png" class="index-imgs"></image>
	</view>
</template>

<script>
	import {
		getDatas
	} from "@/common/common.js"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"

	import basePath from "@/common/basePath.js"
	import {
		GetObjProperty,
		IsArray
	} from "@/common/common.js"

	export default {
		data() {
			return {
				status: 'more',
				lists: [],
				items: [{
					id: "-1",
					name: "全部"
				}],
				current: "-1", //抽屉中选择的索引
				page: 1,
				pageSize: 20,
				total: 0,
				array: ['全部', '在线', '离线'],
				index: 0, //左边选择的index
				showRight: false,
				searchValue: '', //存放搜索值
			}
		},
		methods: {
			pullDownRefresh() {
				this.page = 1

				setTimeout(() => {
					this.getData(() => {
						uni.stopPullDownRefresh()
					})
				}, 100)
			},
			getType() {
				uni.request({
					url: `${basePath}/equipment/getAllProduct`,
					method: "GET",
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						if (resData.code === 200 && resData.success) {
							let data = IsArray(GetObjProperty(resData, "data"))

							this.items = this.items.concat(data)
						}
					}
				})
			},
			//跳转到详情页
			todetial(id) {
				uni.navigateTo({
					url: `/pages/equipment/details?equId=${id}`
				});
			},
			//获取设备数据
			getData(callBack) {
				let stateName = this.array[this.index]
				let state = ""
				switch (stateName) {
					case "在线":
						state = "online"
						break;
					case "离线":
						state = "offline"
						break;
					default:
				}

				uni.request({
					url: `${basePath}/equipment/pageQuery`,
					method: "GET",
					data: {
						key: this.searchValue,
						state,
						page: this.page,
						pageSize: this.pageSize,
						productId: this.current === "-1" ? "" : this.current
					},
					complete() {
						callBack && callBack()
					},
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						if (resData.code === 200 && resData.success) {
							let data = GetObjProperty(resData, "data")
							let rows = IsArray(GetObjProperty(data, "rows"))

							this.total = GetObjProperty(data, "totalCount", 0)

							if (this.page == 1) {
								this.lists = rows;
							} else {
								this.lists = this.lists.concat(rows);
							}
							if (this.page * this.pageSize >= this.total) {
								this.status = "noMore";
							}
						}
					}
				})
			},
			//从右侧打开抽屉
			do_open() {
				this.$refs.uniDrawer.open()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				this[type] = e
			},
			//抽屉里面的选择事件
			radioChange: function(evt) {
				this.current = evt.target.value
				this.getData()
			},
			// 搜索框的事件--点击
			searchs(e) {
				this.searchValue = e.value;
				this.getData()
			},
			// 左边下拉的选择事件
			bindPickerChange: function(e) {
				this.index = e.target.value
				this.getData()
			},
		},
		components: {
			uniSearchBar,
			uniDrawer,
			uniLoadMore
		}, //注册为子组件
		onLoad() {
			this.getType()
			
			uni.startPullDownRefresh()
			this.getData()
		},
		onReachBottom() {
			//判断什么时候出现底部提示语
			if (this.page * this.pageSize < this.total) {
				this.page++;
				this.status = "loading";
				setTimeout(() => {
					this.getData()
				}, 200)
			}
		},
		onPullDownRefresh() {
			this.pullDownRefresh()
		},
	}
</script>

<style lang="scss" scoped>
	.isOver {
		width: 100%;
		/* height: 50px;
			line-height: 50px; */
		text-align: center;
		// background: #fff;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
		color: #999999;

	}

	.equip-total {
		display: flex;
		// height: 100vh;
		// height: 100%;
		width: 100%;
		position: relative;
		box-sizing: border-box;
		flex-direction: column;

		.equip-sear {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			height: 108upx;
			padding-left: 30upx;
			padding-right: 30upx;
			border-top: 2upx solid #F5F7F9;
			background-color: #FFFFFF;
			box-sizing: border-box;

			.picker-class {
				width: 168upx;
				height: 60upx;
				background: #F5F7F9;
				opacity: 1;
				border-radius: 8upx;
				text-align: center;
				float: left;
				padding-left: 24upx;
				box-sizing: border-box;
				padding-right: 24upx;

				.uni-inputs {
					height: 60upx;
					line-height: 60upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					opacity: 1;
					float: left;

				}

				.img-one {
					height: 10upx;
					width: 18upx;
					float: right;
					margin-top: 24upx;
				}
			}

			.search-class {
				flex: 1;
				height: 60upx;
				margin-left: 16rpx;
				background: #F5F7F9;
				opacity: 1;
				border-radius: 8upx;
			}

			.more-search-box {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 60rpx;
				height: 60rpx;

				.img-two {
					height: 24upx;
					width: 24upx;
				}
			}

			.drawer-class {
				padding: 30upx;
				position: relative;

				.shebei-class {
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40upx;
					color: #999999;
					opacity: 1;
					margin-bottom: 20upx;
				}
			}
		}

		.no-data {
			width: 100%;
			margin-top: 300rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}

		.scroll-list {
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 1;
			width: 100%;
			padding-top: 108rpx;
			box-sizing: border-box;
			// box-sizing: border-box;
			// padding-left: 30upx;
			// padding-right: 30upx;
			/* height: 544upx; */
			// border: 2upx solid red;

			.list-common {
				height: 240upx;
				display: flex;
				width: calc(100% - 60rpx);
				margin: 0 30rpx;
				flex-direction: column;
				padding: 36rpx 30rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				opacity: 1;
				margin-bottom: 48upx;
				border-radius: 16upx;

				// box-shadow: 0 10upx 0 #F5F7F9, 8upx 0 0 #F5F7F9, -8upx 0 0 #F5F7F9;
				box-shadow: 0 0 12px #E3ECEF;

				&:first-child {
					margin-top: 20rpx;
				}

				.common-1 {
					width: 100%;
					// position: relative;
					display: flex;
					align-items: center;
					height: 40upx;
					margin-bottom: 40upx;

					.zaixian {
						width: 78upx;
						// position: absolute;
						height: 30upx;
						// left: 0;
						// top: 5upx;
						padding: 0 14upx;
						// flex: 0 1 auto;
						margin-top: 5upx;
						line-height: 30upx;
						background: rgba(110, 187, 105, 0.3);
						border-radius: 4upx;
						text-align: center;
						font-size: 16upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(92, 204, 114, 1);
						box-sizing: border-box;
					}

					.lixian {
						width: 78upx;
						// position: absolute;
						height: 30upx;
						// left: 0;
						// top: 5upx;
						padding: 0 14upx;
						// flex: 0 1 auto;
						margin-top: 5upx;
						line-height: 30upx;
						background: rgba(235, 103, 103, 0.3);
						border-radius: 4upx;
						text-align: center;
						font-size: 16upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(235, 103, 103, 1);
						box-sizing: border-box;
					}

					.comm-title {
						height: 100%;
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 40upx;
						color: #333333;
						opacity: 1;
						// position: absolute;
						// left: 94upx;
						// flex: 1 1 auto;
						flex: 1;
						margin-left: 10upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

					}
				}

				.common-2 {
					width: 100%;
					height: 34upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 34upx;
					color: #999999;
					opacity: 1;
					margin-bottom: 20upx;

				}

			}
		}

		.index-imgs {
			height: 48upx;
			width: 100%;
			position: fixed;
			bottom: 0;
			z-index: 2;
		}
	}
</style>
